<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>MVC DOH Test</title>

	<style>
		@import "../../../../../dojo/resources/dojo.css";
		@import "../../../../../dijit/tests/css/dijitTests.css";
		@import "../css/app-format.css";
	</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script src="../../../../../dojo/dojo.js" type="text/javascript"
		djConfig="isDebug: true">
	</script>
	<script type="text/javascript" src="../helpers.js"></script>

	<script type="text/javascript" >
			dojo.require("dojox.mvc");
			dojo.require("dojox.mvc.Output");
			dojo.require("dijit.form.TextBox");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.Select");
			dojo.require("dijit.form.FilteringSelect");
			dojo.require("dijit.form.ComboBox");
			dojo.require("dijit.form.DateTextBox");
			dojo.require("dijit.form.HorizontalSlider");
			dojo.require("dijit.form.NumberSpinner");
			dojo.require("dijit.form.NumberTextBox");
			dojo.require("dijit.form.SimpleTextarea");		
			dojo.require("dijit.form.Textarea");
			dojo.require("dojo.data.ItemFileReadStore");
			dojo.require("dijit.Calendar");
			dojo.require("dijit.ColorPalette");
			dojo.require("dojo.date.locale");
			dojo.require("dojo.parser");
			// The dojox.mvc.StatefulModel class creates a data model instance
			// where each leaf within the data model is decorated with dojo.Stateful
			// properties that widgets can bind to and watch for their changes.

			var alreadyset = false;	
			var data = [
				{id: '1',name:"one"},
				{id: '2',name:"two"},
				{id: '3',name:"three"},
				{id: '4',name:"four"},
				{id: '5',name:"five"},
				{id: '6',name:"six"},
				{id: '7',name:"seven"},
				{id: '8',name:"eight"},
				{id: '9',name:"nine"},
				{id: '10',name:"ten"},
				{id: '11',name:"eleven"},
				{id: '12',name:"twelve"},
				{id: '13',name:"thirteen"}
			  ];
			var store = new dojo.data.ItemFileReadStore({
				data: {
					identifier: 'id',
					label: 'name',
					items: data
				}
			});

			var data2 = {
				identifier: "value",
				label: "label",
				items: [
					{value: "1", label: "one"},
					{value: "2", label: "two"},
					{value: "3", label: "three"},
					{value: "4", label: "four"},
					{value: "5", label: "five"},
					{value: "6", label: "six"},
					{value: "7", label: "seven"},
					{value: "8", label: "eigth"},
					{value: "9", label: "nine"},
					{value: "10", label: "ten"},
					{value: "11", label: "eleven"},
					{value: "12", label: "twelve"},
					{value: "13", label: "thirteen"},
					{value: "14", label: "fourteen"}
				]
			};
			var store2 = new dojo.data.ItemFileReadStore({data:dojo.clone(data2)});

			// create models for selects
			var selmodel = new dojox.mvc.newStatefulModel({data: {number: '1'}});
			var decselmodel = new dojox.mvc.newStatefulModel({data: {number: '1'}});

			// create models for filtering selects
			var filmodel = new dojox.mvc.newStatefulModel({data: {number: '2'}});
			var decfilmodel = new dojox.mvc.newStatefulModel({data: {number: '2'}});

			// create models for ComboBoxes
			var combomodel = new dojox.mvc.newStatefulModel({data: {number: 'three'}});
			var deccombomodel = new dojox.mvc.newStatefulModel({data: {number: 'three'}});

			// create a model for DateTextBox
			var datemodel = new dojox.mvc.newStatefulModel({data: {number: new Date(2011, 3, 4)}});
			var decdatemodel = new dojox.mvc.newStatefulModel({data: {number: new Date(2011, 3, 4)}});

			// create a model for Slider
			var slidermodel = new dojox.mvc.newStatefulModel({data: {number: '5'}});
			var decslidermodel = new dojox.mvc.newStatefulModel({data: {number: '5'}});

			// create a model for NumberSpinner
			var numspinmodel = new dojox.mvc.newStatefulModel({data: {number: '6'}});
			var decnumspinmodel = new dojox.mvc.newStatefulModel({data: {number: '6'}});

			// create a model for SimpleTextArea
			var simpTAmodel = new dojox.mvc.newStatefulModel({data: {number: '7'}});
			var decsimpTAmodel = new dojox.mvc.newStatefulModel({data: {number: '7'}});

			// create a model for TextArea
			var textareamodel = new dojox.mvc.newStatefulModel({data: {number: '8'}});
			var dectextareamodel = new dojox.mvc.newStatefulModel({data: {number: '8'}});

			// create a model for dijit.Calendar
			var deccalmodel = new dojox.mvc.newStatefulModel({data: {date: new Date(2011,4,4)}});

			// create a model for dijit.ColorPalette
			var deccolormodel = new dojox.mvc.newStatefulModel({data: {code: "#000000"}});

			var nanmodel = new dojox.mvc.newStatefulModel({data: {num: null}});

	</script>

	<script type="text/javascript">
		dojo.require('doh.runner');
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		dojo.addOnLoad(function(){

			doh.register("parse", function(){
				dummyDateWid = new dijit.form.DateTextBox({constraints:{datePattern:"MM-dd-yyyy", strict:true}});

				dojo.parser.parse();

			// Handle the programmatic creation of widgets here:
			
			// create the select, textbox, output and button			
			var sel = new dijit.form.Select({
				store: store,
				loadChildrenOnOpen: true,
				ref: selmodel.number // bind to model.number
			}, document.getElementById('sel'));
			
			var text = new dijit.form.TextBox({
				//id: "seltext",
				ref: selmodel.number
			}, document.getElementById('seltext'));			
			text.startup();
			
			var selOutput = new dojox.mvc.Output({
				ref: selmodel.number
			}, document.getElementById('selOutput'));
			selOutput.startup();

			var reset1 = new dijit.form.Button({
				onClick: function(){selmodel.reset();},
				id: "selReset",
				label: "Reset"
			}, document.getElementById('reset1'));
			reset1.startup();


			sel.watch('value', function () {
				//console.log('sel value changed', arguments);
			});

			text.watch('value', function () {
				//console.log('text value changed', arguments);
			});
			
			sel.startup();
			

			// create the filtering select, textbox, output and button			
			var filsel = new dijit.form.FilteringSelect({
				store: store,
				ref: filmodel.number // bind to model.number
			}, document.getElementById('filsel'));
			
			var filtext = new dijit.form.TextBox({
				ref: filmodel.number
			}, document.getElementById('filtext'));
			
			var filoutput = new dojox.mvc.Output({
				ref: filmodel.number
			}, document.getElementById('filoutput'));			
			filoutput.startup();

			var filreset = new dijit.form.Button({
				onClick: function(){filmodel.reset();},
				id: "filReset",
				label: "Reset"
			}, document.getElementById('filreset'));
			filreset.startup();
			
			filtext.startup();
			filsel.startup();
			
			// create the comboBox, textbox, output and button			
			var combo = new dijit.form.ComboBox({
				store: store,
				ref: combomodel.number // bind to model.number
			}, document.getElementById('combosel'));
			
			var combotext = new dijit.form.TextBox({
				ref: combomodel.number
			}, document.getElementById('combotext'));
			
			var combooutput = new dojox.mvc.Output({
				ref: combomodel.number
			}, document.getElementById('combooutput'));			
			combooutput.startup();

			var comboreset = new dijit.form.Button({
				onClick: function(){combomodel.reset();},
				id: "comboReset",
				label: "Reset"
			}, document.getElementById('comboreset'));
			comboreset.startup();
			
			combotext.startup();
			combo.startup();
			
			var dateWid = new dijit.form.DateTextBox({
				ref: datemodel.number // bind to model.number
			}, document.getElementById('datesel'));
			dateWid.constraints = dummyDateWid.constraints;
			dateWid.dateLocaleModule = dummyDateWid.dateLocaleModule;
			dateWid.format = dummyDateWid.format;
			dateWid.startup();
			
			var datetext = new dijit.form.TextBox({				
				disabled : true,
				ref: datemodel.number
			}, document.getElementById('datetext'));
			datetext.constraints = dummyDateWid.constraints;
			datetext.dateLocaleModule = dummyDateWid.dateLocaleModule;
			datetext.format = dummyDateWid.format;
			datetext.startup();
			
			var dateoutput = new dojox.mvc.Output({
				ref: datemodel.number
			}, document.getElementById('dateoutput'));			
			dateoutput.startup();

			var datereset = new dijit.form.Button({
				onClick: function(){datemodel.reset();},
				id: "dateReset",
				label: "Reset"
			}, document.getElementById('datereset'));
			datereset.startup();
			
			
			// create the dijit.form.HorizontalSlider, textbox, output and button			
			var sliderWid = new dijit.form.HorizontalSlider({
						style:{width:"190px"},
						minimum:0,
						maximum:100,
						discreteValues:21,
				ref: slidermodel.number // bind to model.number
			}, document.getElementById('slidersel'));
			
			var slidertext = new dijit.form.TextBox({
				ref: slidermodel.number
			}, document.getElementById('slidertext'));
			
			var slideroutput = new dojox.mvc.Output({
				ref: slidermodel.number
			}, document.getElementById('slideroutput'));			
			slideroutput.startup();

			var sliderreset = new dijit.form.Button({
				onClick: function(){slidermodel.reset();},
				id: "sliderReset",
				label: "Reset"
			}, document.getElementById('sliderreset'));
			sliderreset.startup();
			
			slidertext.startup();
			sliderWid.startup();
			
			// create the dijit.form.NumberSpinner, textbox, output and button			
			var numspinWid = new dijit.form.NumberSpinner({
			//	constraints:{max:100,places:0},
				ref: numspinmodel.number // bind to model.number
			}, document.getElementById('numspinsel'));
			
			var numspintext = new dijit.form.TextBox({
				ref: numspinmodel.number
			}, document.getElementById('numspintext'));
			
			var numspinoutput = new dojox.mvc.Output({
				ref: numspinmodel.number
			}, document.getElementById('numspinoutput'));			
			numspinoutput.startup();

			var numspinreset = new dijit.form.Button({
				onClick: function(){numspinmodel.reset();},
				id: "numspinReset",
				label: "Reset"
			}, document.getElementById('numspinreset'));
			numspinreset.startup();
			
			numspintext.startup();
			numspinWid.startup();
			
			// create the dijit.form.SimpleTextarea, textbox, output and button 			
			var simpTAWid = new dijit.form.SimpleTextarea({
				style:{height:"20px", width:"180px"},
				ref: simpTAmodel.number // bind to model.number
			}, document.getElementById('simpTAsel'));
			
			var simpTAtext = new dijit.form.TextBox({
				ref: simpTAmodel.number
			}, document.getElementById('simpTAtext'));
			
			var simpTAoutput = new dojox.mvc.Output({
				ref: simpTAmodel.number
			}, document.getElementById('simpTAoutput'));			
			simpTAoutput.startup();

			var simpTAreset = new dijit.form.Button({
				onClick: function(){simpTAmodel.reset();},
				id: "simpTAReset",
				label: "Reset"
			}, document.getElementById('simpTAreset'));
			simpTAreset.startup();
			
			simpTAtext.startup();
			simpTAWid.startup();

			// create the dijit.form.Textarea, textbox, output and button 
			var textareaWid = new dijit.form.Textarea({
			//	constraints:{max:100,places:0},
				ref: textareamodel.number // bind to model.number
			}, document.getElementById('textareasel'));
			
			var textareatext = new dijit.form.TextBox({
				ref: textareamodel.number
			}, document.getElementById('textareatext'));
			
			var textareaoutput = new dojox.mvc.Output({
				ref: textareamodel.number
			}, document.getElementById('textareaoutput'));			
			textareaoutput.startup();

			var textareareset = new dijit.form.Button({
				onClick: function(){textareamodel.reset();},
				id: "textareaReset",
				label: "Reset"
			}, document.getElementById('textareareset'));
			textareareset.startup();
			
			textareatext.startup();
			textareaWid.startup();

			var numBox = new dijit.form.NumberTextBox({
				ref: nanmodel.num // bind to model.num
			}, document.getElementById('nannb'));

			numBox.startup();

			
		});

			// should be able to verify all of the inputs
			//console.log("This test is commented out because it will fail if _FromSelectWidget is not updated to setup the store in postCreate instead of startup, see ticket 13372 for details."); 
			
			doh.register("Check initial programatic values and bindings for select widget only", [
				{
					name: "initialSelectOnly",
					runTest: function(){
						var wid, textboxval, outputval; 
						// Test Select
						wid = dijit.byId("sel");
						textboxval = dijit.byId("seltext").value;
						outputval = dijit.byId("selOutput").value;
						if (wid) {
								doh.is("1",wid.get('value'),"This test will fail if _FromSelectWidget is not updated to setup the store in postCreate instead of startup, see ticket 13372 for details.");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
					}
				}
			]);
			
			doh.register("Check initial programatic values and bindings widgets other than select", [
				{
					name: "initialOtherThanSelect",
					runTest: function(){
						var wid, textboxval, outputval; 
						// Test FilteringSelect
						wid = dijit.byId("filsel");
						textboxval = dijit.byId("filtext").value;
						outputval = dijit.byId("filoutput").value;
						if (wid) {
								doh.is("2",wid.get('value'),"wid.get('value') should be set");
								doh.is("two",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.ComboBox
						wid = dijit.byId("combosel");
						textboxval = dijit.byId("combotext").value;
						outputval = dijit.byId("combooutput").value;
						if (wid) {
								doh.is("three",wid.get('value'),"wid.get('value') should be set");
								doh.is("three",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.DateTextBox
						wid = dijit.byId("datesel");
						textboxval = dijit.byId("datetext").displayedValue;
						outputval = dijit.byId("dateoutput").value;
						if (wid) {
								var date = new Date(2011, 3, 4, 0, 0, 0, 0);
								doh.is(date.getTime(), wid.get("value").getTime(), "wid.get(\"value\") should be set it is:" + wid.get("value"));
								doh.is("04-04-2011", wid.displayedValue, "wid.displayedValue should be set it is:" + wid.displayedValue);
								doh.is("04-04-2011", textboxval, "textboxval should be set it is:" + textboxval);
								doh.is(date.getTime(), outputval.getTime(), "outputval should be set to match date:" + date);
						}
						// Test dijit.form.HorizontalSlider
						wid = dijit.byId("slidersel");
						textboxval = dijit.byId("slidertext").value;
						outputval = dijit.byId("slideroutput").value;
						if (wid) {
								doh.is("5",wid.get('value'),"wid.get('value') should be set");
								//doh.is("five",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.NumberSpinner
						wid = dijit.byId("numspinsel");
						textboxval = dijit.byId("numspintext").value;
						outputval = dijit.byId("numspinoutput").value;
						if (wid) {
								//doh.is("6",wid.get('value'),"wid.get('value') should be set");
								doh.is("6",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.displayedValue,"wid.displayedValue should be set same as textboxval");
								doh.is(outputval,wid.displayedValue,"wid.displayedValue should be set same as outputval");
						}
						// Test dijit.form.SimpleTextarea
						wid = dijit.byId("simpTAsel");
						textboxval = dijit.byId("simpTAtext").value;
						outputval = dijit.byId("simpTAoutput").value;
						if (wid) {
								doh.is("7",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.Textarea
						wid = dijit.byId("textareasel");
						textboxval = dijit.byId("textareatext").value;
						outputval = dijit.byId("textareaoutput").value;
						if (wid) {
								doh.is("8",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}


					}
				}
			]);

			// should be able to verify all of the inputs 
			doh.register("Check initial declarative values and bindings", [
				{
					name: "initial-declarative",
					runTest: function(){
						var wid, textboxval, outputval; 
						// Test Select
						wid = dijit.byId("decsel");
						textboxval = dijit.byId("decseltext").value;
						outputval = dijit.byId("decselOutput").value;
						if (wid) {
								doh.is("1",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test FilteringSelect
						wid = dijit.byId("decfilsel");
						textboxval = dijit.byId("decfiltext").value;
						outputval = dijit.byId("decfilOutput").value;
						if (wid) {
								doh.is("2",wid.get('value'),"wid.get('value') should be set");
								doh.is("two",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.ComboBox
						wid = dijit.byId("deccombosel");
						textboxval = dijit.byId("deccombotext").value;
						outputval = dijit.byId("deccomboOutput").value;
						if (wid) {
								doh.is("three",wid.get('value'),"wid.get('value') should be set");
								doh.is("three",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.DateTextBox
						wid = dijit.byId("decdatesel");
						textboxval = dijit.byId("decdatetext").displayedValue;
						outputval = dijit.byId("decdateOutput").value;
						if (wid) {
								var date = new Date(2011, 3, 4, 0, 0, 0, 0);
								doh.t(wid.get("value").getTime() == date.getTime(), "wid.get(\"value\") should be set to:" + date);
								doh.is("04-04-2011",wid.displayedValue,"wid.displayedValue should be set it is:"+wid.displayedValue);
								doh.is("04-04-2011",textboxval,"textboxval should be set it is:"+textboxval);
								doh.t(outputval.getTime() == date.getTime(), "outputval should be set to:" + date);
						}
						// Test dijit.form.HorizontalSlider
						wid = dijit.byId("decslidersel");
						textboxval = dijit.byId("decslidertext").value;
						outputval = dijit.byId("decsliderOutput").value;
						if (wid) {
								doh.is("5",wid.get('value'),"wid.get('value') should be set");
								//doh.is("five",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.NumberSpinner
						wid = dijit.byId("decnumspinsel");
						textboxval = dijit.byId("decnumspintext").value;
						outputval = dijit.byId("decnumspinOutput").value;
						if (wid) {
								//doh.is("6",wid.get('value'),"wid.get('value') should be set");
								doh.is("6",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.displayedValue,"wid.displayedValue should be set same as textboxval");
								doh.is(outputval,wid.displayedValue,"wid.displayedValue should be set same as outputval");
						}
						// Test dijit.form.SimpleTextarea
						wid = dijit.byId("decsimpTAsel");
						textboxval = dijit.byId("decsimpTAtext").value;
						outputval = dijit.byId("decsimpTAOutput").value;
						if (wid) {
								doh.is("7",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.Textarea
						wid = dijit.byId("dectextareasel");
						textboxval = dijit.byId("dectextareatext").value;
						outputval = dijit.byId("dectextareaOutput").value;
						if (wid) {
								doh.is("8",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}


					}
				}
			]);

			// should be able to verify all of the inputs 
			doh.register("Check initial calendar and colorpalette values", [
				{
					name: "test-calendar-and-color",
					runTest: function(){
						var wid, textboxval, outputval; 
						// Test Calendar
						wid = dijit.byId("deccal");
						textboxval = dijit.byId("deccaltext").value;
						outputval = dijit.byId("deccalOutput").value;
						if (wid) {
							var date = new Date(2011, 4, 4, 0, 0, 0, 0);
							doh.t(wid.get("value").getTime() == date.getTime(), "wid.get(\"value\") should be set to:" + date);
							doh.t(textboxval.getTime() == date.getTime(), "1-textboxval should be set to:" + date);
							doh.t(outputval.getTime() == date.getTime(), "1-outputval should be set to:" + date);
						}
						// Test dijit.ColorPalette
						wid = dijit.byId("deccolor");
						textboxval = dijit.byId("deccolortext").value;
						outputval = dijit.byId("deccolorOutput").value;
						if (wid) {
								doh.is("#000000",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}						
					}
				}
			]);

			doh.register("Check update and reset calendar and colorpalette values", [
				{
					name: "test-calendar-and-color",
					runTest: function(){
						var wid, textboxval, outputval; 
						// Test Update calendar
						var d = new Date(2011,10,10);
						wid = dijit.byId("deccal");
						//wid.set('value', d.toDateString()); 						
						wid.set('value', d); 						
						textboxval = dijit.byId("deccaltext").value;
						outputval = dijit.byId("deccalOutput").value;
						if (wid && wid.get('value')) {
							var date1 = new Date(2011, 10, 10, 0, 0, 0, 0);
							var date2 = new Date(2011, 10, 10, 1, 0, 0, 0);
							doh.t(wid.get("value").getTime() == date1.getTime(), "wid.get(\"value\") should be set to:" + date1);
							doh.t(textboxval.getTime() == date2.getTime(), "2-textboxval should be set to:" + date2);
							doh.t(outputval.getTime() == date2.getTime(), "2-outputval should be set to:" + date2);
						}

						// Test dijit.ColorPalette
						// update the text field
						dijit.byId('deccolortext').set('value',"#ffffff");						
						wid = dijit.byId("deccolor");
						textboxval = dijit.byId("deccolortext").value;
						outputval = dijit.byId("deccolorOutput").value;
						if (wid) {
								doh.is("#ffffff",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}

						// Test Reset Calendar
						button = dijit.byId("deccalReset"); // reset the model
						button.onClick();
						wid = dijit.byId("deccal");
						textboxval = dijit.byId("deccaltext").value;
						outputval = dijit.byId("deccalOutput").value;
						if (wid) {
							var date = new Date(2011, 4, 4, 0, 0, 0, 0);
							doh.t(wid.get("value").getTime() == date.getTime(), "wid.get(\"value\") should be set to:" + date);
							doh.t(textboxval.getTime() == date.getTime(), "3-textboxval should be set to:" + date);
							doh.t(outputval.getTime() == date.getTime(), "3-outputval should be set to:" + date);
						}
						// Test reset the dijit.ColorPalette
						button = dijit.byId("deccolorReset"); // reset the model
						button.onClick();
						wid = dijit.byId("deccolor");
						textboxval = dijit.byId("deccolortext").value;
						outputval = dijit.byId("deccolorOutput").value;
						if (wid) {
								doh.is("#000000",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						
						
						
					}
				}
			]);


			// Update and Test all fields 
			doh.register("Test update for all programatic values and bindings", [
				{
					name: "update-programatic",
					runTest: function(){
						// update the text field
						dijit.byId('seltext').set('value',"10");						
						var wid, textboxval, outputval; 
						// Test Select
						wid = dijit.byId("sel");
						textboxval = dijit.byId("seltext").value;
						outputval = dijit.byId("selOutput").value;
						if (wid) {
								doh.is("10",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test FilteringSelect
						// update the text field
						dijit.byId('filtext').set('value',"10");						
						wid = dijit.byId("filsel");
						textboxval = dijit.byId("filtext").value;
						outputval = dijit.byId("filoutput").value;
						if (wid) {
								doh.is("10",wid.get('value'),"wid.get('value') should be set");
								doh.is("ten",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.ComboBox
						dijit.byId('combotext').set('value',"ten");						
						wid = dijit.byId("combosel");
						textboxval = dijit.byId("combotext").value;
						outputval = dijit.byId("combooutput").value;
						if (wid) {
								doh.is("ten",wid.get('value'),"wid.get('value') should be set");
								doh.is("ten",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.DateTextBox
						// update the text field
						var d = new Date(2011, 9, 10, 0, 0, 0, 0);
						//wid.set('value', d.toDateString()); //"2011-09-09");						
						//dijit.byId('datetext').set('value',d.toDateString());						
						dijit.byId('datetext').set('value',d);						
						wid = dijit.byId("datesel");
						textboxval = dijit.byId("datetext").value;
						outputval = dijit.byId("dateoutput").value;
						if (wid) {
							var date = new Date(2011, 9, 10, 0, 0, 0, 0);
							doh.t(wid.get("value").getTime() == date.getTime(), "wid.get(\"value\") should be set to:" + date);
							doh.t(textboxval.getTime() == date.getTime(), "2-textboxval should be set to:" + date);
							doh.t(outputval.getTime() == date.getTime(), "2-outputval should be set to:" + date);
						}
						// Test dijit.form.HorizontalSlider
						// update the text field
						dijit.byId('slidertext').set('value',"10");						
						wid = dijit.byId("slidersel");
						textboxval = dijit.byId("slidertext").value;
						outputval = dijit.byId("slideroutput").value;
						if (wid) {
								doh.is("10",wid.get('value'),"wid.get(value) should be set");
								//doh.is("five",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.NumberSpinner
						dijit.byId('numspintext').set('value',"10");						
						wid = dijit.byId("numspinsel");
						textboxval = dijit.byId("numspintext").value;
						outputval = dijit.byId("numspinoutput").value;
						if (wid) {
								doh.is("10",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.displayedValue,"wid.displayedValue should be set same as textboxval");
								doh.is(outputval,wid.displayedValue,"wid.displayedValue should be set same as outputval");
						}
						// Test dijit.form.SimpleTextarea
						dijit.byId('simpTAtext').set('value',"10");						
						wid = dijit.byId("simpTAsel");
						textboxval = dijit.byId("simpTAtext").value;
						outputval = dijit.byId("simpTAoutput").value;
						if (wid) {
								doh.is("10",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.Textarea
						dijit.byId('textareatext').set('value',"10");						
						wid = dijit.byId("textareasel");
						textboxval = dijit.byId("textareatext").value;
						outputval = dijit.byId("textareaoutput").value;
						if (wid) {
								doh.is("10",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}


					}
				}
			]);

			// Update and Test all fields 
			doh.register("Test update for all declarative values and bindings", [
				{
					name: "update-declarative",
					runTest: function(){
						dijit.byId("decsel").set('value',"4");   // update widget value						
						var wid, textboxval, outputval; 
						// Test Select
						wid = dijit.byId("decsel");
						textboxval = dijit.byId("decseltext").value;
						outputval = dijit.byId("decselOutput").value;
						if (wid) {
								doh.is("4",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test FilteringSelect
						wid = dijit.byId("decfilsel");
						wid.set('value','4');   // update widget value
						textboxval = dijit.byId("decfiltext").value;
						outputval = dijit.byId("decfilOutput").value;
						if (wid) {
								doh.is("4",wid.get('value'),"wid.get('value') should be set");
								doh.is("four",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.ComboBox
						wid = dijit.byId("deccombosel");
						wid.set('value',"four");   // update widget value
						textboxval = dijit.byId("deccombotext").value;
						outputval = dijit.byId("deccomboOutput").value;
						if (wid) {
								doh.is("four",wid.get('value'),"wid.get('value') should be set");
								doh.is("four",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.DateTextBox
						wid = dijit.byId("decdatesel");
						//var d = new Date(2011,09,09);
						//wid.set('value', d.toDateString()); //"2011-09-09");						
						wid.set('value', "2011-09-09");						
						textboxval = dijit.byId("decdatetext").value;
						outputval = dijit.byId("decdateOutput").value;
						if (wid) {
								var date = new Date(2011, 8, 9, 0, 0, 0, 0);
								doh.t(wid.get("value").getTime() == date.getTime(), "wid.get(\"value\") should be set to:" + date);
								doh.t(textboxval.getTime() == date.getTime(), "2-textboxval should be set to:" + date);
								doh.t(outputval.getTime() == date.getTime(), "2-outputval should be set to:" + date);
								doh.is("09-09-2011",wid.displayedValue,"wid.displayedValue should be set");
						}
						// Test dijit.form.HorizontalSlider
						wid = dijit.byId("decslidersel");
						wid.set('value',"4");   // update widget value
						textboxval = dijit.byId("decslidertext").value;
						outputval = dijit.byId("decsliderOutput").value;
						if (wid) {
								doh.is("4",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.NumberSpinner
						wid = dijit.byId("decnumspinsel");
						wid.set('displayedValue',"4");   // update widget value
						textboxval = dijit.byId("decnumspintext").value;
						outputval = dijit.byId("decnumspinOutput").value;
						if (wid) {
								doh.is("4",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.displayedValue,"wid.displayedValue should be set same as textboxval");
								doh.is(outputval,wid.displayedValue,"wid.displayedValue should be set same as outputval");
						}
						// Test dijit.form.SimpleTextarea
						wid = dijit.byId("decsimpTAsel");
						wid.set('value',"4");   // update widget value
						textboxval = dijit.byId("decsimpTAtext").value;
						outputval = dijit.byId("decsimpTAOutput").value;
						if (wid) {
								doh.is("4",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.Textarea
						wid = dijit.byId("dectextareasel");
						wid.set('value',"4");   // update widget value
						textboxval = dijit.byId("dectextareatext").value;
						outputval = dijit.byId("dectextareaOutput").value;
						if (wid) {
								doh.is("4",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}


					}
				}
			]);




			// Test RESET for all fields 
			doh.register("Test reset for all programatic values and bindings", [
				{
					name: "reset-programatic",
					runTest: function(){
						// reset the model
						var button = dijit.byId("selReset"); 
						button.onClick();
						var wid, textboxval, outputval; 
						// Test Select
						wid = dijit.byId("sel");
						textboxval = dijit.byId("seltext").value;
						outputval = dijit.byId("selOutput").value;
						if (wid) {
								doh.is("1",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test FilteringSelect
						button = dijit.byId("filReset"); 
						button.onClick();
						wid = dijit.byId("filsel");
						textboxval = dijit.byId("filtext").value;
						outputval = dijit.byId("filoutput").value;
						if (wid) {
								doh.is("2",wid.get('value'),"wid.get('value') should be set");
								doh.is("two",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.ComboBox
						button = dijit.byId("comboReset"); 
						button.onClick();
						wid = dijit.byId("combosel");
						textboxval = dijit.byId("combotext").value;
						outputval = dijit.byId("combooutput").value;
						if (wid) {
								doh.is("three",wid.get('value'),"wid.get('value') should be set");
								doh.is("three",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.DateTextBox
						button = dijit.byId("dateReset"); 
						button.onClick();
						wid = dijit.byId("datesel");
						textboxval = dijit.byId("datetext").value;
						outputval = dijit.byId("dateoutput").value;
						if (wid) {
							var date = new Date(2011, 3, 4, 0, 0, 0, 0);
							doh.t(textboxval.getTime() == date.getTime(), "textboxval should be set to:" + date);
							doh.t(outputval.getTime() == date.getTime(), "outputval should be set to:" + date);
						}
						// test a second reset...
						button.onClick();
						if (wid) {
								var date = new Date(2011, 3, 4, 0, 0, 0, 0);
								doh.t(wid.get("value").getTime() == date.getTime(), "wid.get(\"value\") should be set to:" + date);
								doh.t(textboxval.getTime() == date.getTime(), "2-textboxval should be set to:" + date);
								doh.t(outputval.getTime() == date.getTime(), "2-outputval should be set to:" + date);
								doh.is("04-04-2011",wid.displayedValue,"wid.displayedValue should be set");
						}
						// Test dijit.form.HorizontalSlider
						button = dijit.byId("sliderReset"); 
						button.onClick();
						wid = dijit.byId("slidersel");
						textboxval = dijit.byId("slidertext").value;
						outputval = dijit.byId("slideroutput").value;
						if (wid) {
								doh.is("5",wid.get('value'),"wid.get('value') should be set");
								//doh.is("five",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.NumberSpinner
						button = dijit.byId("numspinReset"); 
						button.onClick();
						wid = dijit.byId("numspinsel");
						textboxval = dijit.byId("numspintext").value;
						outputval = dijit.byId("numspinoutput").value;
						if (wid) {
								doh.is("6",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.displayedValue,"wid.displayedValue should be set same as textboxval");
								doh.is(outputval,wid.displayedValue,"wid.displayedValue should be set same as outputval");
						}
						// Test dijit.form.SimpleTextarea
						button = dijit.byId("simpTAReset"); 
						button.onClick();
						wid = dijit.byId("simpTAsel");
						textboxval = dijit.byId("simpTAtext").value;
						outputval = dijit.byId("simpTAoutput").value;
						if (wid) {
								doh.is("7",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.Textarea
						button = dijit.byId("textareaReset"); 
						button.onClick();
						wid = dijit.byId("textareasel");
						textboxval = dijit.byId("textareatext").value;
						outputval = dijit.byId("textareaoutput").value;
						if (wid) {
								doh.is("8",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}


					}
				}
			]);

			// Test reset all declarative 
			doh.register("Test Reset all declarative values and bindings", [
				{
					name: "reset-declarative",
					runTest: function(){
						var button = dijit.byId("decselReset"); // reset the model
						button.onClick();
						var wid, textboxval, outputval; 
						// Test Select
						wid = dijit.byId("decsel");
						textboxval = dijit.byId("decseltext").value;
						outputval = dijit.byId("decselOutput").value;
						if (wid) {
								doh.is("1",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test FilteringSelect
						button = dijit.byId("decfilReset"); // reset the model
						button.onClick();
						wid = dijit.byId("decfilsel");
						textboxval = dijit.byId("decfiltext").value;
						outputval = dijit.byId("decfilOutput").value;
						if (wid) {
								doh.is("2",wid.get('value'),"wid.get('value') should be set");
								doh.is("two",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.ComboBox
						button = dijit.byId("deccomboReset"); // reset the model
						button.onClick();
						wid = dijit.byId("deccombosel");
						textboxval = dijit.byId("deccombotext").value;
						outputval = dijit.byId("deccomboOutput").value;
						if (wid) {
								doh.is("three",wid.get('value'),"wid.get('value') should be set");
								doh.is("three",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.DateTextBox
						button = dijit.byId("decdateReset"); // reset the model
						button.onClick();
						wid = dijit.byId("decdatesel");
						textboxval = dijit.byId("decdatetext").displayedValue;
						outputval = dijit.byId("decdateOutput").value;
						if (wid) {
								var date = new Date(2011, 3, 4, 0, 0, 0, 0);
								doh.t(wid.get("value").getTime() == date.getTime(), "wid.get(\"value\") should be set to:" + date);
								doh.is("04-04-2011",wid.displayedValue,"wid.displayedValue should be set");
								doh.is("04-04-2011",textboxval,"textboxval should be set");
								outputval = dijit.byId("decdateOutput").value;
								doh.t(outputval.getTime() == date.getTime(), "outputval should be set to:" + date);
						}
						// Test dijit.form.HorizontalSlider
						button = dijit.byId("decsliderReset"); // reset the model
						button.onClick();
						wid = dijit.byId("decslidersel");
						textboxval = dijit.byId("decslidertext").value;
						outputval = dijit.byId("decsliderOutput").value;
						if (wid) {
								doh.is("5",wid.get('value'),"wid.get('value') should be set");
								//doh.is("five",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.NumberSpinner
						button = dijit.byId("decnumspinReset"); // reset the model
						button.onClick();
						wid = dijit.byId("decnumspinsel");
						textboxval = dijit.byId("decnumspintext").value;
						outputval = dijit.byId("decnumspinOutput").value;
						if (wid) {
								//doh.is("6",wid.get('value'),"wid.get('value') should be set");
								doh.is("6",wid.displayedValue,"wid.displayedValue should be set");
								doh.is(textboxval,wid.displayedValue,"wid.displayedValue should be set same as textboxval");
								doh.is(outputval,wid.displayedValue,"wid.displayedValue should be set same as outputval");
						}
						// Test dijit.form.SimpleTextarea
						button = dijit.byId("decsimpTAReset"); // reset the model
						button.onClick();
						wid = dijit.byId("decsimpTAsel");
						textboxval = dijit.byId("decsimpTAtext").value;
						outputval = dijit.byId("decsimpTAOutput").value;
						if (wid) {
								doh.is("7",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}
						// Test dijit.form.Textarea
						button = dijit.byId("dectextareaReset"); // reset the model
						button.onClick();
						wid = dijit.byId("dectextareasel");
						textboxval = dijit.byId("dectextareatext").value;
						outputval = dijit.byId("dectextareaOutput").value;
						if (wid) {
								doh.is("8",wid.get('value'),"wid.get('value') should be set");
								doh.is(textboxval,wid.get('value'),"wid.get('value') should be set same as textboxval");
								doh.is(outputval,wid.get('value'),"wid.get('value') should be set same as outputval");
						}

					}
				}
			]);


			// Test reset all declarative 
			doh.register("Test NaN values and bindings", [
				{
					name: "NaN-test",
					runTest: function(){
						var button = dijit.byId("decselReset"); // reset the model
						button.onClick();
						var wid, wid2; 

						// test for NaN stuff here, uses nanmodel, without fix for ticket 14190 FF crashes
						wid = dijit.byId("nannb");
						wid.focus();
						wid2 = dijit.byId("textareatext");
						wid2.focus();
						wid = dijit.byId("nannb");
						wid.focus();
						wid2.focus();
						if (wid) {
								doh.t(isNaN(wid.get('value')),"isNaN(wid.get('value') should be true");
						}

					}
				}
			]);

			doh.run();

		});
	</script>
</head>
	<body class="claro">
		<div id="wrapper">
			<div id="header" style="margin-top: 0px;">
				<div id="navigation"  style="margin-top: 0px;"></div>
				<div id="headerInsert"  style="margin-top: 0px;">
					<h2>Data-bound Form Element Kitchen Sink MVC test</h2>
				</div>
			</div>
			<div id="main" style="margin-top: 0px;">
				<div id="leftNav"></div>
				<div id="mainContent">
	
					<h2 style="margin-top: 0px;">Programmatic creation of Form elements:</h2>
					<table>
						<tbody>
							<tr>
								<td><label>Widget</label></td>
								<td><label></label></td>
								<td><label>Textbox</label></td>
								<td><label>Output</label></td>
								<td><label>Model Reset</label></td>
							</tr>
							<tr>
								<td><label for="sel">Select:</label></td>
								<td><div id="sel"></div></td>
								<td><div id="seltext"></div></td>
								<td><div id="selOutput"></div></td>
								<td><div id="reset1" ></div></td>
							</tr>
							<tr>
								<td><label for="filsel">FilteringSelect:</label></td>
								<td><div id="filsel"></div></td>
								<td><div id="filtext"></div></td>
								<td><div id="filoutput"></div></td>
								<td><div id="filreset"></div></td>
							</tr>
							<tr>
								<td><label for="combosel">ComboBox:</label></td>
								<td><div id="combosel"></div></td>
								<td><div id="combotext"></div></td>
								<td><div id="combooutput"></div></td>
								<td><div id="comboreset"></div></td>
							</tr>
							<tr>
								<td><label for="datesel">DateTextBox:</label></td>
								<td><div id="datesel"></div></td>
								<td><div id="datetext"></div></td>
								<td><div id="dateoutput"></div></td>
								<td><div id="datereset"></div></td>
							</tr>
							<tr>
								<td><label for="slidersel">Slider:</label></td>
								<td><div id="slidersel"></div></td>
								<td><div id="slidertext"></div></td>
								<td><div id="slideroutput"></div></td>
								<td><div id="sliderreset"></div></td>
							</tr>
							<tr>
								<td><label for="numspinsel">NumberSpinner:</label></td>
								<td><div id="numspinsel"></div></td>
								<td><div id="numspintext"></div></td>
								<td><div id="numspinoutput"></div></td>
								<td><div id="numspinreset"></div></td>
							</tr>
							<tr>
								<td><label for="simpTAsel">SimpleTextArea:</label></td>
								<td><div id="simpTAsel"></div></td>
								<td><div id="simpTAtext"></div></td>
								<td><div id="simpTAoutput"></div></td>
								<td><div id="simpTAreset"></div></td>
							</tr>
							<tr>
								<td><label for="textareasel">TextArea:</label></td>
								<td><div id="textareasel"></div></td>
								<td><div id="textareatext"></div></td>
								<td><div id="textareaoutput"></div></td>
								<td><div id="textareareset"></div></td>
							</tr>
							<tr>
								<td><label for="nannb">TextBox nan test:</label></td>
								<td><div id="nannb"></div></td>
							</tr>							
						</tbody>
					</table>
	  
					<h2>Declarative creation of Form elements:</h2>
					<table>
						<tbody>
							<tr>
								<td><label>Widget</label></td>
								<td><label></label></td>
								<td><label>Textbox</label></td>
								<td><label>Output</label></td>
								<td><label>Model Reset</label></td>
							</tr>
							<tr>
								<td><label for="decsel">Select:</label></td>
								<td>
									<select id="decsel" style="width: 188px;" 
													data-dojo-id="decsel" data-dojo-type="dijit.form.Select" 
													data-dojo-props='name:"decsel", ref: decselmodel.number '>
										<option value="1">one</option>
										<option value="2">two</option>
										<option value="3">three</option>
										<option value="4">four</option>
									</select>
								</td>
								<td>
									<input class="cell" id="decseltext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: decselmodel.number"></input>
								</td>
								<td><span   id="decselOutput" data-dojo-type="dojox.mvc.Output"
											data-dojo-props="ref: decselmodel.number">
						 			${this.value}
								</span></td>
								<td><button id="decselReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){decselmodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="decfilsel">FilteringSelect:</label></td>
								<td>
									<input id="decfilsel" data-dojo-type="dijit.form.FilteringSelect"
										data-dojo-props='store:store, ref: decfilmodel.number'/>
								</td>
								<td>
									<input id="decfiltext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: decfilmodel.number"></input>
								</td>
								<td><span id="decfilOutput" data-dojo-type="dojox.mvc.Output" 
											data-dojo-props="ref: decfilmodel.number">
						 			${this.value}
								</span></td>
								<td><button id="decfilReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){decfilmodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="deccombosel">ComboBox:</label></td>
								<td>
									<input id="deccombosel" data-dojo-type="dijit.form.ComboBox"
										data-dojo-props='store:store, ref: deccombomodel.number'/>
								</td>
								<td>
									<input id="deccombotext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: deccombomodel.number"></input>
								</td>
								<td><span id="deccomboOutput" data-dojo-type="dojox.mvc.Output" 
											data-dojo-props="ref: deccombomodel.number">
						 			${this.value}
								</span></td>
								<td><button id="deccomboReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){deccombomodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="datesel">DateTextBox:</label></td>
								<td>
									<input id="decdatesel" data-dojo-type="dijit.form.DateTextBox"
										data-dojo-props='store:store, ref: decdatemodel.number, constraints: dummyDateWid.constraints'/>
								</td>
								<td>
									<input id="decdatetext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: decdatemodel.number, 
									disabled: true,
									constraints: dummyDateWid.constraints,
									dateLocaleModule : dummyDateWid.dateLocaleModule,
									format : dummyDateWid.format"></input>
								</td>
								<td><span id="decdateOutput" data-dojo-type="dojox.mvc.Output" 
											data-dojo-props="ref: decdatemodel.number, constraints: dummyDateWid.constraints">
						 			${this.value}
								</span></td>
								<td><button id="decdateReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){decdatemodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="decslidersel">Slider:</label></td>
								<td>
									<input id="decslidersel" data-dojo-type="dijit.form.HorizontalSlider"
										data-dojo-props='store:store, ref: decslidermodel.number,
														style:{width:"190px"}, minimum:0, maximum:100, discreteValues:21'/>
								</td>
								<td>
									<input id="decslidertext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: decslidermodel.number"></input>
								</td>
								<td><span id="decsliderOutput" data-dojo-type="dojox.mvc.Output" 
											data-dojo-props="ref: decslidermodel.number">
						 			${this.value}
								</span></td>
								<td><button id="decsliderReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){decslidermodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="decnumspinsel">NumberSpinner:</label></td>
								<td>
									<input id="decnumspinsel" data-dojo-type="dijit.form.NumberSpinner"
										data-dojo-props='store:store, ref: decnumspinmodel.number'/>
								</td>
								<td>
									<input id="decnumspintext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: decnumspinmodel.number"></input>
								</td>
								<td><span id="decnumspinOutput" data-dojo-type="dojox.mvc.Output" 
											data-dojo-props="ref: decnumspinmodel.number">
						 			${this.value}
								</span></td>
								<td><button id="decnumspinReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){decnumspinmodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="decsimpTAsel">SimpleTextArea:</label></td>
								<td>
									<input id="decsimpTAsel" data-dojo-type="dijit.form.Textarea"
										data-dojo-props='store:store, ref: decsimpTAmodel.number'/>
								</td>
								<td>
									<input id="decsimpTAtext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: decsimpTAmodel.number"/>
								</td>
								<td><span id="decsimpTAOutput" data-dojo-type="dojox.mvc.Output" 
											data-dojo-props="ref: decsimpTAmodel.number">
						 			${this.value}
								</span></td>
								<td><button id="decsimpTAReset" type="button" data-dojo-type="dijit.form.Button" 
										data-dojo-props="onClick: function(){decsimpTAmodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="dectextareasel">TextArea:</label></td>
								<td>
									<input id="dectextareasel" data-dojo-type="dijit.form.Textarea"
										data-dojo-props='store:store, ref: dectextareamodel.number'/>
								</td>
								<td>
									<input id="dectextareatext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: dectextareamodel.number"/>
								</td>
								<td><span id="dectextareaOutput" data-dojo-type="dojox.mvc.Output" 
											data-dojo-props="ref: dectextareamodel.number">
						 			${this.value}
								</span></td>
								<td><button id="dectextareaReset" type="button" data-dojo-type="dijit.form.Button" 
										data-dojo-props="onClick: function(){dectextareamodel.reset();}">Reset</button></td>
							</tr>
						</tbody>
					</table>
	  
					<h2>Test data-bound dijit.Calendar:</h2>
					<table>
						<tbody>
							<tr>
								<td><label>Widget</label></td>
								<td><label></label></td>
								<td><label>Textbox</label></td>
								<td><label>Output</label></td>
								<td><label>Model Reset</label></td>
							</tr>
							<tr>
								<td><label for="deccal">Calendar:</label></td>
								<td>
									<input class="cell"  id="deccal" data-dojo-id="deccal"  data-dojo-type="dijit.Calendar" 
											data-dojo-props='ref: deccalmodel.date '/>
								</td>
								<td>
									<input class="cell" id="deccaltext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: deccalmodel.date"></input>
								</td>
								<td><span   id="deccalOutput" data-dojo-type="dojox.mvc.Output"
											data-dojo-props="ref: deccalmodel.date">
						 			${this.value}
								</span></td>
								<td><button id="deccalReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){deccalmodel.reset();}">Reset</button></td>
							</tr>
							<tr>
								<td><label for="deccolor">ColorPalette:</label></td>
								<td>
									<div id="deccolor" data-dojo-type="dijit.ColorPalette" 
											data-dojo-props='palette:"3x4", ref: deccolormodel.code'></div>								
								</td>
								<td>
									<input class="cell" id="deccolortext" data-dojo-type="dijit.form.TextBox"
									data-dojo-props="ref: deccolormodel.code"></input>
								</td>
								<td><span   id="deccolorOutput" data-dojo-type="dojox.mvc.Output"
											data-dojo-props="ref: deccolormodel.code">
						 			${this.value}
								</span></td>
								<td><button id="deccolorReset" type="button" data-dojo-type="dijit.form.Button" 
											data-dojo-props="onClick: function(){deccolormodel.reset();}">Reset</button></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>
